<template>
  <div class="container">
    <el-button
      style="margin-bottom: 10px"
      type="primary"
      size="small"
      @click="handleAdd()"
    >新增部门</el-button>
    <div>
      <el-table v-loading="isLoading" :data="listData" border>
        <el-table-column prop="archDeptCode" align="center" label="部门编码" />
        <el-table-column prop="archDeptName" align="center" label="部门名称" />
        <el-table-column prop="managerName" align="center" label="部门主管" />
        <el-table-column prop="notes" align="center" label="备注" />
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
            >编辑部门信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page.sync="page.pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="page.pageSize"
          layout="sizes, total, prev, pager, next"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      v-loading="isLoading"
      :title="title"
      :visible.sync="digitalVisible"
      width="40%"
    >
      <div>
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="formRules"
          label-position="right"
          label-width="140px"
        >
          <el-form-item label="部门名称" prop="archDeptName">
            <el-input v-model="addForm.archDeptName" />
          </el-form-item>
          <el-form-item v-if="title === '编辑部门信息'" label="主管">
            <el-select
              v-model="addForm.manager"
              filterable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              :loading="selectLoading"
              class="search-input"
              size="small"
              placeholder="请选择"
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in staffData"
                :key="item.staffCode"
                :label="item.staffName"
                :value="item.staffCode"
              >
                <span style="float: left">{{ item.staffName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.staffCode
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="addForm.notes" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="digitalVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllArchDept, addArchDept, updateArchDept } from '@/api/archDept'
import { qryUserByDept } from '@/api/user'
export default {
  data() {
    return {
      isLoading: false,
      selectLoading: false,
      digitalData: [],
      digitalVisible: false,
      addForm: {
        manager: '',
        archDeptName: '',
        notes: ''
      },
      listData: [],
      staffData: [],
      title: '',
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      formRules: {
        archDeptName: [
          { required: true, message: '请输入部门名称', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize
      }
      getAllArchDept(param)
        .then((res) => {
          if (res.code === '0') {
            this.listData = res.data.records
            this.page.total = parseInt(res.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 获取部门员工
    qryUserByDept(query) {
      this.selectLoading = true
      const param = {
        archDeptCode: this.addForm.archDeptCode,
        pageNum: -1,
        pageSize: -1,
        staffName: !parseInt(query) ? query : '',
        staffCode: parseInt(query) ? query : ''
      }
      qryUserByDept(param)
        .then((response) => {
          if (response.code === '0') {
            this.staffData = response.data.records
            this.page.total = parseInt(response.data.total)
          }
        })
        .finally(() => {
          this.selectLoading = false
        })
    },
    // 编辑部门信息
    handleEdit(row) {
      this.addForm = { ...row }
      this.qryUserByDept()
      if (!this.addForm.manager) this.addForm.manager = ''
      this.title = '编辑部门信息'
      this.digitalVisible = true
    },
    remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true
        this.qryUserByDept(query)
        setTimeout(() => {
          this.selectLoading = false
          this.staffData = this.staffData.filter((item) => {
            return (
              item.staffName.indexOf(query) > -1 ||
              item.staffCode.indexOf(query) > -1
            )
          })
        }, 1000)
      } else {
        this.qryUserByDept()
      }
    },
    // 添加部门
    handleAdd() {
      this.addForm = {
        manager: '',
        archDeptName: '',
        notes: ''
      }
      this.title = '新增部门'
      this.digitalVisible = true
    },
    // 提交信息
    submit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          if (this.title === '新增部门') {
            addArchDept({ ...this.addForm }).then((res) => {
              if (res.code === '0') {
                console.log(res)
                this.getData()
                this.isLoading = false
                this.digitalVisible = false
              }
            })
          } else {
            updateArchDept({ ...this.addForm }).then((res) => {
              if (res.code === '0') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.getData()
                this.isLoading = false
                this.digitalVisible = false
              }
            })
          }
        }
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
</style>
